<#import '/fed/demo/inc/page.ftl' as macros />
<@macros.header 'search'>
</@macros.header>

<@macros.body 'search' 'search' 'search'>
    <div class="bs-docs-section">
      <div class="page-header">
        <h2 id="examples">案例</h1>
      </div>
      <h3>基本表格查询</h3>
      <div class="bs-example">
        <div id="J_Search">
            <form action="" method="POST" class="form-inline" role="form">

                <div class="form-group">
                    <label for="">标题</label>
                    <input type="text" name="title" class="form-control" id="" placeholder="Input field">
                </div>

                <button type="submit" class="btn btn-primary">搜索</button>
            </form>

        </div>
      </div>
      <div class="highlight">
        <pre>
        <code class="language-js">
var search = new Search({
  url: '/getOrder',
  gridCfg: {
    pageSize: 3,
    columnNames: ["Name", "Price ($)", "Quantity","时间"],
    columnKeys: ["Name", "Price", "Quantity", 'datetime'],
    cellTemplates: [null, null, null, '{{fdate datetime}}']
  }
});
        </code>
        </pre>
      </div>

      <h3>带有 checkbox 表格查询</h3>
      <div class="bs-example">
        <div id="J_Search2">
            <form action="" method="POST" class="form-inline" role="form">

                <div class="form-group">
                    <label for="">标题</label>
                    <input type="text" name="title" class="form-control" id="" placeholder="Input field">
                </div>

                <button type="submit" class="btn btn-primary">搜索</button>
            </form>
            <div id="J_Grid2"></div>
        </div>
      </div>
      <div class="highlight">
        <pre>
        <code class="language-js">
var search2 = new Search({
  element: '#J_Search2',
  gridElement: '#J_Grid2',
  url: '/getOrder',
  gridCfg: {
    hasCheckbox: true,
    onCheck:function(data) {
      console.log(data)
    },
    pageSize: 3,
    columnNames: ["Name", "Price ($)", "Quantity"],
    columnKeys: ["Name", "Price", "Quantity"],
    columnWidths: ["50%", "25%", "25%"]
  }
});
        </code>
        </pre>
      </div>

      <h3>自定义单元格</h3>
      <div class="bs-example">
        <div id="J_Search3">
          <form action="" method="POST" class="form-inline" role="form">

              <div class="form-group">
                  <label for="">标题</label>
                  <input type="text" name="title" class="form-control" id="" placeholder="Input field">
              </div>

              <button type="submit" class="btn btn-primary">搜索</button>
          </form>
        </div>
      </div>
      <div class="highlight">
        <pre>
        <code class="language-js">
var opts = [
  '&lt;a href="###" data-id="{{OrderLineID}}"&gt;编辑&lt;/a&gt;',
  '&lt;a href="###" data-id="{{OrderLineID}}"&gt;删除&lt;/a&gt;'

];
opts = opts.join(' ');
var search3 = new Search({
  element: '#J_Search3',
  gridElement: '#J_Grid3',
  url: '/getOrder',
  gridCfg: {
    pageSize: 3,
    columnNames: ["Name", "Price ($)", "Quantity", "操作"],
    cellTemplates: [null, null, null, opts],
    columnKeys: ["Name", "Price", "Quantity", null]
  }
});
        </code>
        </pre>
      </div>
      <h3>图列表查询</h3>
      <div class="bs-example">
        <div id="J_Search4">
          <form action="" method="POST" class="form-inline" role="form">

              <div class="form-group">
                  <label for="">标题</label>
                  <input type="text" name="title" class="form-control" id="" placeholder="Input field">
              </div>

              <button type="submit" class="btn btn-primary">搜索</button>
          </form>
          <div id="J_Grid4"></div>
        </div>
      </div>
      <div class="highlight">
        <pre>
        <code class="language-js">
var gallery = new Gallery({
  element: '#J_Search4',
  url: 'imageSearch'
});
        </code>
        </pre>
      </div>

      <div class="page-header">
        <h2 id="usage">用法</h1>
      </div>
      <h3>选项</h3>
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>名称</th>
            <th>类型</th>
            <th>默认值</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>element</td>
            <td>String</td>
            <td>#J_Search</td>
            <td>查询表单的元素</td>
          </tr>
          <tr>
            <td>gridElement</td>
            <td>String</td>
            <td>null</td>
            <td>表格元素，如为null,会动态创建一个 div.ue-grid ,也可手动指定</td>
          </tr>
          <tr>
            <td>url</td>
            <td>String</td>
            <td>null</td>
            <td>查询表格的请求地址</td>
          </tr>
          <tr>
            <td>gridCfg</td>
            <td>Object</td>
            <td>无</td>
            <td>
              查询表格的配置
            </td>
          </tr>
          <tr>
            <td>gridCfg.pageSize</td>
            <td>Number</td>
            <td>10</td>
            <td>
              每页条数
            </td>
          </tr>
          <tr>
            <td>gridCfg.hasCheckbox</td>
            <td>Boolean</td>
            <td>false</td>
            <td>
              是否显示 checkbox
            </td>
          </tr>
          <tr>
            <td>gridCfg.checkTemplate</td>
            <td>String</td>
            <td>&lt;input type="checkbox" class="checkbox"&gt;</td>
            <td>
              显示 checkbox 单元格模板
            </td>
          </tr>
          <tr>
            <td>gridCfg.columnNames</td>
            <td>Array</td>
            <td>null</td>
            <td>
              定义表格列头显示
            </td>
          </tr>
          <tr>
            <td>gridCfg.columnNames</td>
            <td>Array</td>
            <td>null</td>
            <td>
              定义表格列头显示
            </td>
          </tr>
          <tr>
            <td>gridCfg.columnKeys</td>
            <td>Array</td>
            <td>null</td>
            <td>
              定义表格列键
            </td>
          </tr>
          <tr>
            <td>gridCfg.columnWidths</td>
            <td>Array</td>
            <td>null</td>
            <td>
              定义表格列宽度
            </td>
          </tr>
          <tr>
            <td>gridCfg.cellTemplates</td>
            <td>Array</td>
            <td>null</td>
            <td>
              定义表格单元格
            </td>
          </tr>
        </tbody>
      </table>
    </div>

</@macros.body>

<@macros.footer>
  <script>
    //seajs.use(['${appRoot}/demo/search']);
  </script>
</@macros.footer>